// 引入清除样式文件
@import './m_reset';

// 利用vw完成移动端的适配
@function vw($w) {
  @return ($w / 750) * 100 + vw;
}

// 引入iconfont图标
@import '../utils/iconfont/iconfont.css';
// 通过CDN引入图标
@import url(http://at.alicdn.com/t/c/font_3631180_pwylptzpe4.css);

// 版心
.wrapper {
  margin: 0 auto;
  width: vw(708);
}

.label {
  margin: vw(32) vw(0) vw(34);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  .left {
    i {
      vertical-align: middle;
      margin-right: vw(8);
      color: #ff9344;
      font-size: vw(56);
    }
    span {
      font-size: vw(30);
    }
  }

  .right {
    i {
      margin-left: vw(8);
      font-size: vw(26);
      color: #ff9344;
    }
    span {
      font-size: vw(24);
    }
  }
}

// 头部样式
header {
  // 设置头部粘性定位
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 999;
  // 设置头部粘性定位

  padding: 0.1333rem 0em;
  nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    button {
      width: 1.64rem;
      height: 0.76rem;
      border-radius: 0.3333rem;
      background-color: transparent;
      border: 2px solid #ff9344;
      font-size: 0.3467rem;
    }

    // 标题
    h4 {
      margin-left: .4rem;
      font-size: 0.4rem;
    }
    // 设置城市样式
    .city {
      position: relative;
      background-color: pink;
      height: 0.7467rem;
      // width: 2.1333rem;
      select {
        vertical-align: top;
        box-sizing: border-box;
        padding-left: vw(15);
        width: 2.1333rem;
        height: 0.7467rem;
        appearance: none;
        font-size: 0.3467rem;
        color: #000;
        border: vw(2) solid #ff9344;
        border-radius: vw(5);
        outline: none;
      }
      i {
        position: absolute;
        top: 57%;
        right: 5%;
        transform: translate(-20%, -50%);
        font-size: .3733rem;
        color: #ff9344;
        pointer-events: none;
      }
    }
  }
}

main {
  //
  &:last-of-type {
    margin-bottom: vw(127);
  }
}

// 底部导航栏
footer {
  height: vw(127);
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;

  ul {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    li {
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        i.footer_icon {
          font-size: 0.9333rem;
          color: #ff9344;
        }
        span {
          font-size: 0.3467rem;
        }
      }
    }
  }
}
